<template>
  <div>
    <div class="box">
      <el-form :model="queryForm" ref="queryRef">
        <el-row>
          <el-col :span="6">
            <el-form-item label="课程：" prop="cur_name">
              <el-input v-model.trim="queryForm.cur_name" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学生：" prop="stu_name">
              <el-input v-model.trim="queryForm.stu_name" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" :loading="searchLoading" @click="getPageData(false, false)">
                <icons name="search"></icons>
                搜索
              </el-button>
              <el-button @click="reset()">
                <icons name="reset"></icons>重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="width: 98%; margin: auto; margin-top: 15px">
      <el-tabs v-model="activeName" type="border-card" @tab-click="tabChange">
        <el-tab-pane label="退款审批" name="2">
          <tabTable v-loading="tableLoading" :activeName="`2`" :tableVal="tableVal" @getPageData="getPageData" />
        </el-tab-pane>
        <el-tab-pane label="删除审批" name="7">
          <tabTable v-loading="tableLoading" :activeName="`7`" :tableVal="tableVal" @getPageData="getPageData" />
        </el-tab-pane>
      </el-tabs>
      <div class="paging">
        <el-pagination layout="total, sizes,prev,pager,next,jumper" :page-size="queryForm.pageSize"
          :page-sizes="[10, 20, 30, 40, 50]" :total="total" :current-page.sync="queryForm.page"
          @current-change="hCurrentChange" @size-change="hSizeChange" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { queryPageData } from '@/api/goodsOrder/approve'
import { defineComponent, reactive, ref } from 'vue'
import useCurrentInstance from '@/utils/useCurrentInstance'
import tabTable from './components/tabTable.vue'
import { ElMessage } from 'element-plus'
export default defineComponent({
  setup(props) {
    const { proxy } = useCurrentInstance()
    const activeName = ref('2')
    const tableVal: any = ref(null)
    const searchLoading = ref(false)
    const tableLoading = ref(false)
    const total = ref(0)
    const queryRef: any = ref(null)
    const queryForm = reactive({
      cur_name: '',
      stu_name: '',
      page: 1,
      pageSize: 10
    })

    const getPageData = (page, pageSize) => {
      page && (queryForm.page = page)
      pageSize && (queryForm.pageSize = pageSize)
      tableVal.value = []
      const params = { ...queryForm, statusCode: activeName.value }
      searchLoading.value = true
      tableLoading.value = true
      queryPageData(params).then((res: any) => {
        tableVal.value = res.data.orderList
        total.value = res.data.total
      }).finally(() => {
        searchLoading.value = false
        tableLoading.value = false
      })
    }

    const reset = () => {
      queryRef.value.resetFields()
    }

    const tabChange = () => {
      getPageData(1, 10)
    }

    const hCurrentChange = (val) => {
      queryForm.page = val
    }

    const hSizeChange = (val) => {
      queryForm.pageSize = val
    }

    getPageData(false, false)

    return {
      activeName,
      tableVal,
      total,
      queryForm,
      searchLoading,
      tableLoading,
      queryRef,
      tabChange,
      hCurrentChange,
      hSizeChange,
      getPageData,
      reset
    }
  },
  components: { tabTable },
})
</script>
<style></style>
